<template>
	<el-dialog v-model="props.show" title="Tips" width="550" close-icon="CloseBold" @close="close">
		<template #header>
			<div>
				<h3>个人账户是否已收到款项？</h3>
			</div>
		</template>
		<template #default>
			<div class="mt-10px">
				<div class="bg-#F7F7F7 p-20px rounded-10px h-90px">
					<template v-if="!isChecked">
						<div class="flex items-center mb-15px">
							<img src="/transaction/c2c/orderSell/right.svg" alt="" class="w-16px h-16px">
							<p class="ml-10px text-14px text-#000000">登录您的收款账户，确认款项已到账。</p>
						</div>
						<div class="flex items-center  mb-15px">
							<img src="/transaction/c2c/orderSell/right.svg" alt="" class="w-16px h-16px">
							<p class="ml-10px text-14px text-#000000">核对买家的真实姓名。</p>
						</div>
						<div class="flex items-center">
							<img src="/transaction/c2c/orderSell/right.svg" alt="" class="w-16px h-16px">
							<p class="ml-10px text-14px text-#000000">勾选下方的复选框，然后点击确认放行进行放币。</p>
						</div>
					</template>
					<template v-else>
						<div class="flex items-start">
							<img src="/transaction/c2c/orderSell/attention.svg" alt="" class="w-16px h-16px">
							<p class="ml-10px text-14px text-#000000">确认付款到账前切勿放币，否则可能造成资产损失!
								为避免因银行拒付而造成资产损失，请勿接受来自非相关
								第三方账户的付款。</p>
						</div>
					</template>
				</div>
				<div class="mt-20px flex items-center">
					<img src="/transaction/c2c/orderSell/select-null.svg" alt="" @click="isChecked = !isChecked"
						v-if="!isChecked" />
					<img src="/transaction/c2c/orderSell/select-right.svg" alt="" @click="isChecked = !isChecked" v-else />
					<p class="ml-10px text-14px text-#000000">我确认买家夏天支付的￥100.00 已到账</p>
				</div>
				<div class="mt-80px">
					<el-button type="primary" color="#ECECF0" style="width:100%;height:50px;font-size: 18px;color:#86909C;"
						v-if="!isChecked">
						确认放行
					</el-button>
					<el-button type="primary" color="#114CEE" style="width:100%;height:50px;font-size: 18px;" v-else @click="click">
						确认放行
					</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>

interface IProps {
	show: boolean;
}

const props = defineProps<IProps>();

const emits = defineEmits(['close','click'])

// 是否勾选中
const isChecked = ref<boolean>(false);

const close = () => {
	emits('close',false);
}

const click = () => {
	isChecked.value = !isChecked.value;
	emits('click');
}

</script>
